import { ChangeDetectionStrategy, Component, signal, computed, effect, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { BreadCrumb, BreadCrumbConfig } from './breadcrumb';
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationEnd, Router } from '@angular/router';
import { distinctUntilChanged, filter, map } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { MenuSection, menuSectionMap } from '@shared/models/menu.models';
import { toSignal } from '@angular/core/rxjs-interop';
import { guid } from '@shared/utils';
import { MenuService } from '@core/services/menu.service';

/**
 * 面包屑导航组件
 * 
 * 功能特性：
 * - 使用 Signals 管理状态，RxJS 处理异步事件
 * - 自动根据路由生成面包屑导航
 * - 支持自定义标签和图标
 * - 支持国际化翻译
 * - 响应式设计，移动端和桌面端适配
 * - 自动订阅管理，无需手动清理
 */
@Component({
  selector: 'cne-breadcrumb',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatIconModule
  ],
  templateUrl: './breadcrumb.component.html',
  styleUrl: './breadcrumb.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BreadcrumbComponent {

  // 使用 Signals 管理状态
  private breadcrumbsSignal = signal<BreadCrumb[]>([]); // 面包屑数据源，存储所有面包屑项
  
  // 图标显示控制 - 默认不显示图标
  showIcons = signal<boolean>(false);
  
  // 计算属性 - 响应式派生状态
  breadcrumbs = computed(() => this.breadcrumbsSignal()); // 公开的面包屑数据，供模板使用
  lastBreadcrumb = computed(() => { // 最后一个面包屑项，用于移动端显示页面标题
    const crumbs = this.breadcrumbs();
    return crumbs[crumbs.length - 1];
  });

  // 当前活动组件状态
  private activeComponent = signal<any>(null); // 当前激活的组件实例，用于动态标签生成

  // 使用 inject() 函数式注入
  private router = inject(Router);
  private activatedRoute = inject(ActivatedRoute);
  private translate = inject(TranslateService);
  private menuService = inject(MenuService);

  constructor() {
    // 监听路由变化，将 Observable 转换为 Signal
    const breadcrumbsFromRoute = toSignal(
      this.router.events.pipe(
        filter((event) => event instanceof NavigationEnd), // 只监听路由结束事件
        distinctUntilChanged(), // 避免重复触发
        map(() => this.buildBreadCrumbs(this.activatedRoute.snapshot, this.menuService.getAllMenuSectionsFlat()))
      ),
      { initialValue: [] } // 初始值为空数组
    );

    // 响应路由变化，更新面包屑状态
    effect(() => {
      const crumbs = breadcrumbsFromRoute();
      this.breadcrumbsSignal.set(crumbs); // 更新面包屑数据（包括空数组）
    });
  }



  /**
   * 设置活动组件
   * @param component 当前活动的组件实例
   */
  setActiveComponent(component: any): void {
    this.activeComponent.set(component); // 设置当前活动组件
    // 如果组件有更新面包屑的方法，监听其变化
    if (component?.updateBreadcrumbs) {
      component.updateBreadcrumbs.subscribe(() => {
        // 重新构建面包屑 - 通过路由事件触发更新
        const sections = this.menuService.getAllMenuSectionsFlat();
        const breadcrumbs = this.buildBreadCrumbs(this.activatedRoute.snapshot, sections);
        this.breadcrumbsSignal.set(breadcrumbs);
      });
    }
  }

  /**
   * 控制图标显示
   * @param show 是否显示图标
   */
  setShowIcons(show: boolean): void {
    this.showIcons.set(show);
  }

  /**
   * 获取路由树中的最后一个子路由
   * @param route 当前路由快照
   * @returns 最后一个子路由快照
   */
  private lastChild(route: ActivatedRouteSnapshot) {
    let child = route;
    while (child.firstChild !== null) { // 递归查找最后一个子路由
      child = child.firstChild;
    }
    return child;
  }

  /**
   * 构建面包屑导航
   * 递归遍历路由树，根据路由配置生成面包屑项
   * @param route 当前路由快照
   * @param availableMenuSections 可用的菜单部分
   * @param breadcrumbs 已构建的面包屑数组
   * @param lastChild 最后一个子路由
   * @returns 完整的面包屑数组
   */
  buildBreadCrumbs(route: ActivatedRouteSnapshot, availableMenuSections: MenuSection[],
    breadcrumbs: Array<BreadCrumb> = [],
    lastChild?: ActivatedRouteSnapshot): Array<BreadCrumb> {
    if (!lastChild) {
      lastChild = this.lastChild(route); // 获取最后一个子路由
    }
    let newBreadcrumbs = breadcrumbs;

    // 检查当前路由是否有面包屑配置
    if (route.routeConfig && route.routeConfig.data) {
      const breadcrumbConfig = route.routeConfig.data['breadcrumb'] as BreadCrumbConfig<any>;

      // 如果配置存在且不需要跳过，则创建面包屑项
      if (breadcrumbConfig && !breadcrumbConfig.skip) {
        let labelFunction: (() => string) | undefined;
        let section: MenuSection | undefined = undefined;

        // 根据菜单ID查找对应的菜单部分 - 使用双重查找机制
        if (breadcrumbConfig.menuId) {
          // 先在扁平化菜单中查找
          section = availableMenuSections.find(menu => menu.id === breadcrumbConfig.menuId);
          
          // 如果找不到，再在全局映射表中查找
          if (!section) {
            section = menuSectionMap.get(breadcrumbConfig.menuId);
          }
        }

        // 确定标签文本，优先使用菜单名称，然后是配置标签，最后是默认值
        const label = section?.name || breadcrumbConfig.label || 'home.home';

        // 如果有自定义标签函数，则使用它
        if (breadcrumbConfig.labelFunction) {
          labelFunction = () => this.activeComponent() ?
            breadcrumbConfig.labelFunction(route, this.translate, this.activeComponent(), lastChild?.data) : label;
        }

        // 确定图标，优先使用菜单图标，然后是配置图标，最后是默认图标
        const icon = section?.icon || breadcrumbConfig.icon || 'home';

        // 构建当前路由的完整路径
        const link = [route.pathFromRoot.map(v => v.url.map(segment => segment.toString()).join('/')).join('/')];

        // 创建面包屑项
        const breadcrumb: BreadCrumb = {
          id: guid(), // 使用统一的工具函数生成ID
          label,
          labelFunction,
          icon,
          link,
          queryParams: {}
        };

        // 将新面包屑项添加到数组中
        newBreadcrumbs = [...breadcrumbs, breadcrumb];
      }
    }

    // 递归处理子路由
    if (route.firstChild) {
      return this.buildBreadCrumbs(route.firstChild, availableMenuSections, newBreadcrumbs, lastChild);
    }

    return newBreadcrumbs;
  }

  /**
   * 获取面包屑标签文本
   * @param breadcrumb 面包屑项
   * @returns 标签文本
   */
  getBreadcrumbLabel(breadcrumb: BreadCrumb): string {
    return breadcrumb.labelFunction ? breadcrumb.labelFunction() : breadcrumb.label;
  }

}
